import styled from "styled-components";

const LoginStyle = styled.div`
  .login {
    height: 100vh;
    background-image: url("https://danyun.oss-cn-chengdu.aliyuncs.com/DYE_mobule_login_bg.png");
    background-size: cover;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;

    .logo {
      position: absolute;
      font-size: 36px;
      color: #cec9c9;
      letter-spacing: 0.1em;
      top: 15%;
      font-weight: normal;
      text-shadow: 0 0 1px currentColor,
        /*highlight*/-1px -1px 1px hsl(182, 12%, 43%),
        0 -1px 1px hsl(184, 18%, 47%), 1px -1px 1px hsl(184, 18%, 70%),
        /*light shadow*/ 1px 1px 1px hsl(184, 80%, 10%),
      0 1px 1px hsl(184, 80%, 10%), -1px 1px 1px hsl(184, 80%, 10%),
        /*outline*/-2px -2px 1px hsl(184, 80%, 15%),
        -1px -2px 1px hsl(184, 80%, 15%), 0 -2px 1px hsl(184, 80%, 15%),
        1px -2px 1px hsl(184, 80%, 15%), 2px -2px 1px hsl(184, 80%, 15%),
        2px -1px 1px hsl(184, 80%, 15%), 2px 0 1px hsl(184, 80%, 15%),
      2px 1px 1px hsl(184, 80%, 15%), -2px 0 1px hsl(184, 80%, 15%),
        -2px -1px 1px hsl(184, 80%, 15%), -2px 1px 1px hsl(184, 80%, 15%),
        /*dark shadow*/ 2px 2px 2px hsl(184, 80%, 5%),
      1px 2px 2px hsl(184, 80%, 5%), 0 2px 2px hsl(184, 80%, 5%),
      -1px 2px 2px hsl(184, 80%, 5%), -2px 2px 2px hsl(184, 80%, 5%);
      margin: 0 auto;
    }
  }
`;

export default LoginStyle;
